<template>
  <div>我是父级</div>
  传递给子组件的数据:{{msg}}
  <hr>
  <child :msg='msg' id="child" msg2='context' @Fun='childFun'></child>
</template>

<script>
import child from "./child.vue";
import { ref } from 'vue';
export default {
  name: 'App',
  components: { child },
  /**
   *  setup方法会首先执行，且执行一次，返回一个包含要使用的对象
   *  此时beforeCreate方法尚未执行，因此vue实例化对象并未生成，this为undefined，
   *  所以setup方法中不能使用this来访问data.methods,props等中定义的属性和方法
   *   setup中定义的属性和方法是唯一的，否则会报错  Duplicated key xxx
   *   setup中定义的属性和方法会与data，method等定义的属性和方法合并
   * 
   * 
   * setup参数(props,contxt)
   * 
   *  props：可以获取在子组件通过props属性接受到的父组件属性参数
   *        通过props.属性名获取传递过来的属性值
   * 
   *  contxt:attrs(用于获取当前组件标签的所有未通过props接收的属性，),emit(分发事件，等同于子组件向父组件传值),slots(插槽)
   */
  beforeCreate () {
    // console.log('beforeCreate执行了');
  },
  created () {
    console.log(this);
    // console.log('created执行了');
  },
  beforeMount () {
    // console.log('beforeMount执行了');
  },
  mounted () {
    // console.log('mounted执行了');
  },

  setup (prop, context) {
    console.log(prop, '父组件');
    console.log(context, '父组件');
    const msg = ref('123')
    function childFun (txt) {
      msg.value += txt
    }
    return {
      msg, childFun
    }
  },
  data () {
    return {
      name: 123
    }
  }
}
</script>

<style>
</style>
